<template>
  <div class="search-history">
    <!-- 默认isDeleteShow = false 全部删除和完成不出现时，删除图标也不出现， -->
    <!--当点击垃圾桶按钮时，isDeleteShow = true 全部删除和完成 出现，删除图标出现 -->
    <!-- 当点击 完成时，isDeleteShow = false, 删除和完成隐藏，垃圾桶出现 -->
    <van-cell title="搜索历史">
      <div v-if="isDeleteShow">
        <span @click="$emit('clear-search-historys')">全部删除</span>
        &nbsp;&nbsp;
        <span @click="isDeleteShow = false">完成</span>
      </div>
      <van-icon name="delete-o" v-else @click="isDeleteShow = true" />
    </van-cell>

    <!-- 绑定点击事件，在非删除状态下，点击历史纪录的数据会触发搜索事件 -->
    <!-- 在搜索状态下，点击历史纪录的数据会触发删除事件 -->
    <van-cell
      :title="item"
      v-for="(item, index) in searchHistorys"
      :key="index"
      @click="onSearchItemClick(item, index)"
    >
      <!-- v-show 比 v-if 更节约性能 -->
      <van-icon name="close" v-show="isDeleteShow" />
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'searchHistory',
  data () {
    return {
      isDeleteShow: false // 控制删除图标是否出现,默认不出现
    }
  },

  // 数据
  //     如果时普通数据(数字、字符串、布尔值)绝对不能修改
  //     即便是修改了也不会传递给父组件
  props: {
    searchHistorys: {
      type: Array,
      required: true
    }
  },
  created () {},
  mounted () {},
  methods: {
    onSearchItemClick (item, index) {
      if (this.isDeleteShow) {
        // 删除状态
        // console.log(11)
        this.searchHistorys.splice(index, 1)
      } else {
        // 非删除状态
        console.log(22)
        this.$emit('search', item)
      }
    }
  }
}
</script>

<style scoped lang="less"></style>
